<template>
  <p>{{ obj.hobby.eat }}</p>
  <button @click="obj.hobby.eat = '面条'">修改 obj.hobby.eat</button>
</template>

<script>
import { watch, ref, isReactive, isRef, reactive } from 'vue'
export default {
  name: 'App',
  setup() {
    const obj = reactive({
      hobby: {
        eat: '西瓜',
      },
    })
    // !reactive 类型的数据，默认就是开启了深度监听，改都改不了
    watch(
      obj,
      (newValue, oldValue) => {
        console.log(newValue === oldValue)
      },
      {
        deep: false, // 改不了
      }
    )

    return { obj }
  },
}
</script>
